<template>
  <div>
    <el-card>
      <!-- 查询区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryFormRef">
        <el-form-item label="选择部门" prop="deptId">
          <dept-select :value.sync="queryInfo.deptId" style="width:220px" />
        </el-form-item>

        <el-form-item label="员工编号" prop="id">
          <el-input
            v-model="queryInfo.id"
            @keyup.enter.native="handleQuery"
            clearable
            placeholder="请输入员工编号搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="empName">
          <el-input
            v-model="queryInfo.empName"
            @keyup.enter.native="handleQuery"
            clearable
            placeholder="请输入员工姓名搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset('queryFormRef')">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="employeesData"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
        style="width: 100%;"
        v-loading="loading"
      >
        <el-table-column label="员工编号" prop="id"></el-table-column>
        <el-table-column label="员工姓名" prop="empName"></el-table-column>
        <el-table-column label="部门编号" prop="deptId"></el-table-column>
        <el-table-column label="部门名称" prop="deptName"></el-table-column>
        <el-table-column label="调动操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="addTranForm(scope.row)"
              >调动</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="getEmployeeInfoList"
        @current-change="getEmployeeInfoList"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size.sync="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <el-dialog title="调动" :visible.sync="dialogVisible">
      <el-form
        :model="tranForm"
        inline
        label-position="right"
        label-width="100px"
        ref="tranFormRef"
        :rules="tranFormRules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工编号" prop="empId">
              <el-input
                v-model="tranForm.empId"
                placeholder="请输入员工编号"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工姓名" prop="empName">
              <el-input
                v-model="tranForm.empName"
                placeholder="请输入员工姓名"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="原部门编号" prop="preDeptId">
              <el-input
                v-model="tranForm.preDeptId"
                placeholder="请输入原部门编号"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调转类型" prop="traType">
              <el-select v-model="tranForm.traType" placeholder="请选择">
                <el-option label="主动调动" :value="1"></el-option>
                <el-option label="被动调动" :value="2"></el-option>
                <el-option label="数据库错误" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="原部门名称" prop="deptName">
              <el-input
                v-model="tranForm.deptName"
                placeholder="请输入原部门名称"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="新部门名称" prop="newDeptId">
              <dept-select
                :value.sync="tranForm.newDeptId"
                style="width:217px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="调转原因" prop="traReason">
              <el-input
                type="textarea"
                :rows="2"
                v-model="tranForm.traReason"
                placeholder="请输入调转原因"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label=" 备 注 " prop="traRemark">
              <el-input
                type="textarea"
                :rows="2"
                v-model="tranForm.traRemark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleFormSubmit">确 定</el-button>
        <el-button @click="dialogVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listEmployee, getEmpToDeptLog } from "@/api/employee";
import { addDeptTranApi } from "@/api/deptTran";
export default {
  data() {
    return {
      queryInfo: {
        // 当前页
        pageNum: 1,
        // 页大小
        pageSize: 10,
        //部门编号
        deptId: undefined,
        //部门名称
        deptName: undefined,
        //员工编号
        id: undefined,
        //员工姓名
        empName: undefined,
      },
      employeesData: [],
      total: 1,
      loading: false,
      dialogVisible: false,
      tranForm: {
        empId: "",
        empName: "",
        preDeptId: "",
        traType: "",
        deptName: "",
        newDeptName: undefined,
        traReason: "",
        traRemark: "",
      },
      tranFormRules: {
        traType: [
          {
            required: true,
            message: "请选择调动类型",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async getEmployeeInfoList() {
      try {
        this.loading = true;
        const { data, code } = await listEmployee(this.queryInfo);
        if (code !== 200) return;
        this.employeesData = data.employeeVos;
        console.log(this.employeesData);
        this.total = data.total;
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.queryInfo.pageNum = 1;
      this.getEmployeeInfoList();
    },
    handleReset(formName) {
      this.$refs[formName].resetFields();
      this.getEmployeeInfoList();
    },
    addTranForm(tranLog) {
      this.dialogVisible = true;
      this.getEmployeeById(tranLog.id);
    },
    /**添加员工部门调转记录 */
    handleFormSubmit() {
      this.$refs.tranFormRef.validate(async (valid) => {
        if (!valid) return;
        const { code } = await addDeptTranApi(this.tranForm);
        if (code !== 200) return;
        this.$message.success("调转成功");
        this.dialogVisible = false;
        this.getEmployeeInfoList();
      });
    },
    async getEmployeeById(id) {
      const { data, code } = await getEmpToDeptLog(id);
      if (code !== 200) return;
      this.tranForm = data;
      this.tranForm.empId=data.id;
      this.tranForm.preDeptId=data.deptId;
    },
  },
  created() {
    this.getEmployeeInfoList();
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin: 18px 0px;
  float: right;
}
.table-expand {
  font-size: 0;
}

/deep/ .table-expand label {
  width: 100px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
